<template>
  <el-dialog :title="`${form.funcDictId ? '修改' : '添加'}方法字典`" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="500px" @closed="$refs.form.resetFields()">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item prop="funcDictId" class="hide" />
      <el-form-item label="字典名称" prop="dictName"><el-input v-model.trim="form.dictName" placeholder="请输入字典名称" :maxlength="100" clearable /></el-form-item>
      <el-form-item label="字典编码" prop="dictCode"><el-input v-model.trim="form.dictCode" placeholder="请输入字典编码" :maxlength="200" clearable /></el-form-item>
      <el-form-item label="方法名称" prop="funcName">
        <el-input v-model.trim="form.funcName" placeholder="请输入方法名称" :maxlength="200" clearable />
      </el-form-item>
      <el-form-item label="方法参数" prop="paramJson"><el-input v-model="form.paramJson" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" placeholder="请输入方法参数" clearable /></el-form-item>
      <el-form-item label="所属工序" prop="checktableId">
        <el-cascader
          v-model="checkTableIds"
          :options="processTree"
          :show-all-levels="false"
          clearable
          placeholder="请选择所属工序"
          style="width: 100%"
          class="input-item"
          @change="handleProcessChange"
        />
      </el-form-item>
      <el-form-item label="来源" prop="sourceSystem">
        <el-select v-model="form.sourceSystem" placeholder="请选择所属系统" clearable class="input-item">
          <el-option v-for="dict in dict.type.cq_pe_source_system" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否强制" prop="belongSystem">
        <el-switch
          v-model="form.strict"
          active-color="#13ce66"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改方法字典
import { nameRule } from '@/utils/validate'
import { editFormMixin } from '@/utils/mixin'
import { addFuncDict, updateFuncDict } from '@/api/cqPe/funcDict'
import { treeCheckTable } from '@/api/qualityManage/checkTable'
export default {
  mixins: [editFormMixin],
  dicts: ['cq_pe_source_system'],
  data() {
    const validateJson = (rule, value, callback) => {
      if (value) {
        try {
          JSON.parse(value)
          callback()
        } catch (e) {
          console.log(e)
          callback(new Error('请输入标准json格式,例：{"node":"JT","offset":"1"}'))
        }
      } else {
        callback()
      }
    }
    return {
      primaryKey: 'funcDictId',
      addApi: addFuncDict,
      updateApi: updateFuncDict,
      form: {
        funcDictId: '',
        dictName: '',
        dictCode: '',
        funcName: '',
        paramJson: '',
        checktableId: '',
        strict: false,
        sourceSystem: ''
      },
      checkTableIds: [],
      rules: {
        dictName: [{ required: true, message: '请输入字典名称' }, nameRule],
        dictCode: [{ required: true, message: '请输入字典编码' }, nameRule],
        funcName: [{ required: true, message: '请输入方法名称' }],
        paramJson: [
          { required: true, message: '请输入方法参数' },
          { validator: validateJson, trigger: 'blur' }
        ]
      },
      processTree: []
    }
  },
  created() {
    this.getCheckTableTree()
  },
  methods: {
    /**
     * 获取工序树
     */
    getCheckTableTree() {
      this.processTree = []
      treeCheckTable().then(res => {
        if (res.code === 200) {
          this.processTree = res.data || []
        }
      })
    },
    /**
     * 处理工序改变
     * @param value
     */
    handleProcessChange(value) {
      if (value instanceof Array && value.length > 1) {
        this.form.checktableId = value[1]
      }
    }
  }
}
</script>
